<template>
  <div class="recreation">
    <ul class="cont">
      <li v-for="(tab, index) in tabs.arr" :key="index" @click="tabClick(tab.name)" :class="tab.name == activeStr ? 'active' : ''">
        {{tab.title}}
      </li>
    </ul>
    <keep-alive>
      <component :is="currentTabComponent"></component>
    </keep-alive>
  </div>
</template>

<script>
import { ref, reactive, defineAsyncComponent } from 'vue'
export default {
  props: {
    title: {
      type: String,
    }
  },
  setup(props) {
    const currentTabComponent = ref('Book')
    let activeStr = ref('Book')
    const tabs = reactive(
      {arr:[
        {title: '读书', name: 'Book'},
        {title: '电影', name: 'Movie'},
        {title: '音乐', name: 'Music'},
      ]} 
    )

    const tabClick = (name)=> {
      // console.log(props)
      currentTabComponent.value = name
      activeStr.value = name
    }

    return {
      currentTabComponent,
      activeStr,
      tabs,
      tabClick
    }
  },
  components: {
    Book: defineAsyncComponent({
      loader: ()=> import('./Book/book.vue')
    }),
    Movie: defineAsyncComponent({
      loader: ()=> import('./Movie/movie.vue')
    }),
    Music: defineAsyncComponent({
      loader: ()=> import('./Music/music.vue')
    })
  }
}
</script>

<style lang="scss" scoped>
.recreation {
  font-size: 16px; /*no*/
  .cont {
    width: 100%;
    display: flex;
    height:90px;
    line-height:90px;
    align-items: center;
    .active {
      color: #ff0000;
    }
  }
  .cont li {
    flex: 1;
    line-height: 30px;
    padding-top: 20px;
    font-size: 20px;  /*no*/
    text-align: center;
  }
}
</style>